<template>
    <div class='orderSetting'>
        <el-dialog title="提现申请" visible @close="$emit('close')" width="1200px" append-to-body :close-on-click-modal="false">
        <!-- <div class="container"> -->
            <el-header>提现申请</el-header>
            <el-main>
                <div style="display:flex; flex-direction:column; align-items: center;">
                    <el-form ref="form" :model="form" style="width: 80%;" :rules="rules" v-loading="formLoading">
                        <el-col :span="24">
                            <el-form-item label="可提现金额：">{{ form.busin.remain_amount }}</el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                            <el-form-item label="是否可提现：">{{ selectDictLabel(yesNo, form.data.is_open) }}</el-form-item>
                        </el-col> -->
                        <el-col :span="24" v-if="form.data.is_open == 1">
                            <el-form-item label="手续费：">{{ form.data.card_handling }}%</el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="提现账户" prop="account_id" v-if="form.data.is_open == 1">
                                <el-select v-model="form.account_id" placeholder="请选择提现账户" clearable size="small"
                                    filterable>
                                    <el-option v-for="dict in accountList" :key="dict.id" :label="dict.name"
                                        :value="dict.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item  prop="with_amount" v-if="form.data.is_open == 1">
                                <template slot="label">
                                    <span>提现金额：</span>
                                    <span style="color: red;font-size: x-small;">(最小金额{{ least }})</span>
                                </template>
                                <el-input style="width: 200px;" v-model="form.with_amount" placeholder="请输入提现金额" 
                                  @keyup.native="form.with_amount = onInput(form.with_amount)" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                       
                        <el-col :span="24" v-if="form.data.is_open == 1">
                            <el-form-item label="到账金额：">{{ toAccount }}</el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="提现规则：">
                                <!-- <span style="white-space: pre-wrap"></span> -->
                                <pre>{{ form.data.rule_desc }}</pre>
                            </el-form-item>
                        </el-col>
                    </el-form>

                    <el-row style="margin-top: 40px;">
                        <el-col>
                            <el-button v-if="form.data.is_open == 1" type="primary" @click="submit">申请提现</el-button>
                            <el-button v-else type="info">暂不可提现</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
            <!-- <el-footer> :disabled="formLoading"  :span="20" title="提现申请"
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </el-footer>  oninput="if(value > least) value = least" @input="changes"-->
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span> -->
        <!-- </div> -->
        </el-dialog>
    </div>
</template>
<script>
import { getAccountListsAll, getWithInfo, setWithInfo } from "@/api/finance/finance.js"
import { yesNo } from "@/api/dictionary"
import throttle from 'lodash.throttle'
export default {
    name: 'withdraw',
    props: {

    },
    data() {
        const isMin = (rule,value,callback) =>{
            if(value < this.least){
                return callback(new Error('提现数额低于最小金额'))
            } else {
        callback()
      }
        }
        return {
            loading: false,
            handleShow: "",
            formLoading: false,
            form: {
                busin: {
                    remain_amount: '',
                },
                with_amount:'',
                data: {}
            },
            least:'',
            yesNo: yesNo,
            rules: {
                account_id: [{ required: true, message: '请选择提现账号', trigger: 'blur' }],
                with_amount: [{ required: true, message: "请输入提现金额", trigger: "blur" }, {validator: isMin, trigger: 'blur'}],
            },
            accountList: [],
            // Info: {},
        }
    },
    computed: {
        toAccount() {
            let money = 0;
            if (this.form.with_amount && this.form.data.card_handling) {
                money = this.form.with_amount * (1 - this.form.data.card_handling / 100)
            } else if (this.form.with_amount && !this.form.data.card_handling) {
                money = this.form.with_amount * 1
            } else {
                money = 0
            }
            return money.toFixed(2)
        }
    },
    created() {
        this.getWithInfo()
        this.getList()
    },
    methods: {
        // changes(value) {
        //     if (value < this.least) {
        //         console.log(9999)
        //         // window.alert('提现最小金额'+this.least);
        //         this.form.with_amount = this.least;
        //     }
        // },
        close() {
            this.$emit('close');
            this.form = {}
            this.handleShow = ""
        },
        getWithInfo() {
            getWithInfo().then(res => {
                console.log(res, '000')
                this.form = res.data
                this.least = Number(this.form.data.least_money)
            })
        },
        getList() {
            getAccountListsAll({ is_show_hide: 1 }).then(res => {
                this.accountList = res.data;

            });
        },
        // handleDelete(row) {
        //     this.$confirm('是否确认删除' + '"' + row.name + '"' + '?', "警告", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //     }).then(function () {
        //         return delMedical({ medical_id: row.id });
        //     }).then(() => {
        //         this.getList();
        //         this.msgSuccess("删除成功");
        //     })
        // },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    let params = {
                        with_amount: this.form.with_amount,
                        account_id: this.form.account_id
                    }
                    setWithInfo(params).then(res => {
                        this.msgSuccess("操作成功，请等待审核！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    }
}
</script>

<style lang='scss' scoped>
.el-header {
    width: 99%;
    background-color: #F3F3F3;
    // color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    width: 99%;
    border: 1px solid #E4E4E4;
    text-align: center;
    line-height: 160px;
}

// /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
//     padding: 0 10px;
// }

// /deep/.el-descriptions-item__cell {
//     padding: 0;
// }

// /deep/ .el-col {
//     margin: 0px;
//     padding: 0px;
//     height: 30px;
//     line-height: 30px;
// }
</style>
